<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <style type="text/css">
        .outer{
            width: 60%;
            background-color: wheat;
            height: 300px;
        }
        .title li{
            list-style: none;
            display: inline-block;
            padding: 10px auto;
        }
        .title{
            background-color: gray;
            padding: 10px;
        }
        .hide{
            display: none;
        }
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
<div class="outer">
    <div>
        <ul class="title">
            <li class="active" egon="c1">11</li>
            <li egon="c2">22</li>
            <li egon="c3">33</li>
        </ul>      
    </div>
    <div class="content">
        <div id="c1">11111</div>
        <div class="hide" id="c2">22222</div>
        <div class="hide" id="c3">33333</div>
    </div>
</div>
<script type="text/javascript">
    $(".title li").click(function(event) {
        $(this).addClass('active').siblings().removeClass('active');
        var $id_value=$(this).attr("egon");
        $("#" + $id_value).removeClass('hide').siblings().addClass('hide');
    });
</script>
</body>
</html>